<template>
  <div>
    <el-button @click="dialogVisible = true" type="primary">添加单车类型</el-button>
    <el-table
        :data="bicycleTypeList"
        border
        style="width: 100%">
      <el-table-column
          prop="id"
          label="编号">
      </el-table-column>
      <el-table-column
          prop="typeName"
          label="类型名称">
      </el-table-column>
      <el-table-column
          prop="detain"
          label="押金（元）"
          width="180">
      </el-table-column>
      <el-table-column
          prop="rent"
          label="租金（元）小时">
      </el-table-column>
      <el-table-column
          prop="purchasePrice"
          label="购入单价（元）">
      </el-table-column>
      <el-table-column
          width="150"
          label="操作">
        <template slot-scope="scope">
          <el-button type="primary" size="small" @click="updateBicycleType(scope.row)">修改</el-button>
          <el-button type="danger" size="small" @click="deBicycleType(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog
        :close-on-click-modal="false"
        title="添加单车类型"
        :visible.sync="dialogVisible"
        width="30%">
      <div>
        <table>
          <tr>
            <td>单车名</td>
            <td>
              <el-input type="text" v-model="bicycleType.typeName"></el-input>
            </td>
          </tr>
          <tr>
            <td>单车押金</td>
            <td>
              <el-input type="text" v-model="bicycleType.detain">
                <template slot="append">元</template>
              </el-input>
            </td>
          </tr>
          <tr>
            <td>单车租金</td>
            <td>
              <el-input type="text" v-model="bicycleType.rent">
                <template slot="append">（元）小时</template>
              </el-input>
            </td>
          </tr>
          <tr>
            <td>单车购入单价</td>
            <td>
              <el-input type="text" v-model="bicycleType.purchasePrice">
                <template slot="append">元</template>
              </el-input>
            </td>
          </tr>
        </table>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addBicycleType">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
        :close-on-click-modal="false"
        title="修改单车类型"
        :visible.sync="dialogVisible2"
        width="30%">
      <div>
        <table>
          <tr>
            <td>单车名</td>
            <td>
              <el-input type="text" v-model="upBicycleType.typeName"></el-input>
            </td>
          </tr>
          <tr>
            <td>单车押金</td>
            <td>
              <el-input type="text" v-model="upBicycleType.detain">
                <template slot="append">元</template>
              </el-input>
            </td>
          </tr>
          <tr>
            <td>单车租金</td>
            <td>
              <el-input type="text" v-model="upBicycleType.rent">
                <template slot="append">（元）小时</template>
              </el-input>
            </td>
          </tr>
          <tr>
            <td>单车购入单价</td>
            <td>
              <el-input type="text" v-model="upBicycleType.purchasePrice">
                <template slot="append">元</template>
              </el-input>
            </td>
          </tr>
        </table>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible2 = false">取 消</el-button>
        <el-button type="primary" @click="updateBicycleTypeConfirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "bicycleType",
  methods: {
    updateBicycleTypeConfirm(){
      this.putRequest(this.$api.bicycleType,this.upBicycleType).then(res => {
        if (res){
          this.initBicycleType()
          this.dialogVisible2=false
        }
      })
    },
    deBicycleType(bi){
      this.deleteRequest(this.$api.bicycleType+bi.id).then(res => {
        if (res){
          this.initBicycleType()
        }
      })
    },
    updateBicycleType(bi){
      this.upBicycleType= JSON.parse(JSON.stringify(bi))
      this.dialogVisible2 =true
    },
    initBicycleType(){
      this.getRequest(this.$api.bicycleType).then(res => {
        console.log(res)
          if (res){
            this.bicycleTypeList = res.obj
            this.dialogVisible=false
          }
      })
    },
    addBicycleType(){
      this.postRequest(this.$api.bicycleType,this.bicycleType).then(res => {
          if (res){
            this.initBicycleType()
            this.dialogVisible=false
          }
      })
    }
  },
  data() {
    return {
      upBicycleType:{

      },
      bicycleTypeList:[],
      bicycleType: {
        typeName:"",
        detain:"",
        rent:"",
        purchasePrice:"",
      },
      dialogVisible2:false,
      dialogVisible:false
    }
  },mounted() {
    this.initBicycleType()
  }
}
</script>

<style scoped>

</style>